/* 
1.登录校验
2.渲染用户名
3.退出登录
*/
checkToken() //1.登录校验token
renderUname() //2.渲染用户名
logOut() //3.退出登录
//学生数据渲染
//1.多次使用抽取渲染函数
const renderStudent = async () =>{
  const res = await axios.get('/students')
  const arr = res.data.data
  //注意0.1分别转换为布尔值为false true
  //注意删除需要绑定对应的id值
  document.querySelector('.list').innerHTML = arr.map(e => {
    return `
    <tr>
        <td>${e.name}</td>
        <td>${e.age}</td>
        <td>${e.gender ? '女' :'男'}</td> 
        <td>${e.group}</td>
        <td>${e.hope_salary}</td>
        <td>${e.salary}</td>
        <td>${e.province + e.city + e.area
        }</td>
        <td>
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${e.id}></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${e.id}></i></a>
        </td>
    </tr>
    `
  }).join('')
}
renderStudent()
//2.新增学生
//2.1新增按钮弹出模态框
const modalDom = document.querySelector('#modal')
const myModal = new bootstrap.Modal(modalDom)
document.querySelector('#openModal').addEventListener('click' , ()=>{
    myModal.show()
    //修改弹出模态框的内容
    document.querySelector('.modal-title').innerHTML = '添加学员'
})
//2.2模态框中输入省市区联动
//抽取省市区联动函数
//默认获取省份
    const province =  document.querySelector('[name="province"]')
    const city = document.querySelector('[name="city"]')
    const area = document.querySelector('[name="area"]')
const selectInit = async () => {
    const res = await axios.get('/api/province')
    //console.log(res.data.list); 
    //属性选择器[]  +=可以保留原来的属性  绑定value值方便省份更改事件拿取
    province.innerHTML += res.data.list.map(e => {
        return `
        <option value="${e}">${e}</option>
        `
    }).join('')

    //绑定省份更改事件
    document.querySelector('[name="province"]').addEventListener('change' ,async e => {
    //只要省份发生了改变，就清空城市列表并设置为--城市--
    city.innerHTML = '<option value="">--城市--</option>'
    //只要省份发生了改变，就清空地区列表并设置为--地区--
    area.innerHTML = '<option value="">--地区--</option>'
    //对应省份的值为e.target.value 
    //注意querry参数为params，需要包在{}中
    const res = await axios.get('/api/city', {params:{
        pname:e.target.value 
    }})
    //console.log(res.data.list);
    city.innerHTML += res.data.list.map(e =>{
        return`
            <option value="${e}">${e}</option>
        `
    }).join('')
})
//pname就是它的value值   console.log(province.value);
//绑定城市更改事件
    city.addEventListener('change' ,async e => {
    //对应地区的值为e.target.value 
    //注意querry参数为params，需要包在{}中
    const res = await axios.get('/api/area', {params:{
        pname:province.value, //pname就是它的value值
        cname:e.target.value
    }})
    //console.log(res.data.list);
    area.innerHTML += res.data.list.map(e =>{
        //console.log(e);
        return`
            <option value="${e}">${e}</option>
        `
    }).join('')
})
}
selectInit()
//2.3点击确认新增数据
//确定添加点击事件
const submit = document.querySelector('#submit')
const formDom = document.querySelector('#form')
submit.addEventListener('click' , e => {
    //判断是添加按钮进来的还是编辑按钮
    const txt = document.querySelector('.modal-title')
    //console.log(txt.innerHTML,txt.value);
    if(txt.innerHTML.includes('添加')){
        addStudent()
    }else if(txt.innerHTML.includes('编辑')){
        //console.log(txt);
        editSubmit()
    }
})
//删除添加点击事件
const del = document.querySelector('.list')
del.addEventListener('click' , e => {
    //console.log(e.target.classList);
    const id = e.target.dataset.id
    if(e.target.classList.contains('bi-trash')){
        delStudent(id)
    }
    if(e.target.classList.contains('bi-pen')){
        myModal.show()
        //修改模态框的title
        document.querySelector('.modal-title').innerHTML = '编辑学员'
        //数据详情获取并回显
        editStudent(id)
        //提交编辑时需要返回id，因此提前设置一个dataset
        document.querySelector('.modal-title').dataset.id = id
    }
})
//新增数据封装函数
const addStudent = async () => {
    try{
    const data = serialize(formDom,{hash:true , empty:true})
    //console.log(data); 字符串转换成数字 +
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    const res = await axios.post('/students',data)
    //console.log(add);
    //提示添加成功
    alertShow(res.data.message)
    //关闭模态框
    myModal.hide()
    //清空模态框内容
    formDom.reset()
    //重新渲染
    renderStudent()}catch(err){
        myModal.hide()
        alertShow('输入内容有误请检查')
        formDom.reset()
    }
}
//删除数据封装函数
const delStudent = async (id) => {
    //console.log(id);
    const res = await axios({
        url:`/students/${id}`,
        method:'DELETE',
        data:{
            id
        }
    })
    //提示删除成功
    alertShow('删除成功')
    renderStudent()
}
//编辑函数
const editStudent = async (id) => {
    //console.log(id);
  const res =  await axios.get(`/students/${id}`)
  //服务器根据编号返回的信息
  console.log(res.data.data);
  //存在特殊情况，回显先把直接能渲染的内容列为一个数组
  const arrKeys = ['name','age','group','salary','hope_salary']
  arrKeys.forEach(e => {
    document.querySelector(`[name = ${e}]`).value = res.data.data[e]
  })
  //渲染性别
  const genders = document.querySelectorAll('[name = "gender"]')
  //console.log(genders[0]); 伪数组
  genders[res.data.data.gender].checked = true
  //省份城市地区回显,先回显省份
  //console.log(res.data.data.province);
  province.value = res.data.data.province
  //根据回显的省份再去获取城市列表并渲染
  const citys =await axios.get('/api/city' ,{
    params:{
        pname:res.data.data.province
    }
  })
  //console.log(citys.data.list);
  city.innerHTML += citys.data.list.map(e =>{
    return `
    <option value="${e}">${e}<option>
    `
  }).join('')
  //对应点击的city值直接回显
  city.value = res.data.data.city
  //根据回显的省份和城市再去获取地区列表并渲染
  const areas = await axios.get('/api/area' , {
    params:{
        pname:res.data.data.province,
        cname:res.data.data.city
    }
  })
  area.innerHTML += areas.data.list.map(e => {
    return `
    <option value="${e}">${e}<option>
    `
  }).join('')
  //对应点击的省份和城市值回显
  area.value = res.data.data.area
}
//编辑学生提交函数
const  editSubmit = async() =>{
    //获取id信息
    const id = document.querySelector('.modal-title').dataset.id
    //console.log(id);
    //先获取表单修改后的数据
    const data = serialize(formDom,{hash:true,empty:true})
    //console.log(data); 字符串转换成数字 +
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    try{//注意data已经是满足请求体的对象了
    const res = await axios.put(`/students/${id}`,data)
    //提示修改成功
    alertShow(res.data.message)
    //重新渲染
    renderStudent()
    //关闭模态框
    myModal.hide()
    //清空模态框内容
    formDom.reset()
        //清除标题的id
        document.querySelector('.modal-title').dataset.id=''
    }catch(err){
        console.log(err);
        
    }
    
}